<template>
  <div class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <el-row type="flex" justify="center">
          <!-- 定义后面的插槽 -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="10"
            layout="total, sizes,prev, pager,next, jumper"
            :total="Number(total)"
          >
          </el-pagination>
          <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PageTools',
  props: ['total', 'pageChange', 'pagesizeChange'],
  methods: {
    handleSizeChange (e) {
      this.$emit('pagesizeChange', e)
    },
    handleCurrentChange (e) {
      this.$emit('pageChange', e)
    }
  },
  data () {
    return {
      currentPage: 1,
      tableData: {}
    }
  }
}
</script>

<style lang="scss">
.page-tools {
  margin: 10px 0;
  margin-top: 20px;
  .before {
    line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
  .el-pagination .el-select .el-input .el-input__inner {
    background-color: #f8f5f5;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #fff;
    color: #ffb200;
  }
  .el-row--flex.is-justify-center {
    justify-content: center;
    margin-bottom: 30px;
  }
}
</style>
